<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
    <!-- 标题 -->
    <h3>使用非变异方法</h3>
    <!-- 说明文字 -->
    <p>非变异方法，不改变原来的数组，但是会返回一个数组</p>
    <!-- 为各个按钮绑定点击事件 -->
    <button v-on:click="addfilter">filter</button>
    <button v-on:click="addcontant">concat</button>
    <button v-on:click="addslice">slice</button>
    <button v-on:click="addmap">map</button>
    <button v-on:click="addinclude">include</button>
    <button v-on:click="addforeach">foreach</button>
</div>
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',  // 指定 Vue 实例挂载的 DOM 元素
        data: {
            num: [1, 3, 2, 8, 5, 9, 0]  // 定义一个数组数据
        },
        methods: {
            // 点击 "filter" 按钮时执行的方法
            addfilter() {
                console.log(this.num);  // 打印原始的 num 数组
                // 使用 filter 方法筛选出 num 数组中偶数元素，并将结果存储在 gh 变量中
                var gh = this.num.filter(function(number) {
                    return number % 2 === 0  // 筛选条件：能被 2 整除的数
                });
                console.log(JSON.stringify(gh));  // 打印筛选后的结果（转换为 JSON 字符串）
            },
            // 点击 "concat" 按钮时执行的方法
            addcontant() {
                console.log(this.num);  // 打印原始的 num 数组
                // 使用 concat 方法将新的元素或数组添加到 num 数组后面，并将结果存储在 dd 变量中
                var dd = this.num.concat(2, 4, 5);
                console.log(dd);  // 打印添加元素后的结果
                var dd = this.num.concat([2, 4, 5], [2, 3, 4]);
                console.log(dd);  // 打印添加多个数组后的结果
            },
            // 点击 "slice" 按钮时执行的方法
            addslice() {
                // 使用 slice 方法进行不同方式的数组切片操作
                var dd = this.num.slice();  // 返回 num 数组的所有元素
                console.log(dd);
                var dd = this.num.slice(1, 2);  // 返回 num 数组索引为 1 的元素
                console.log(dd);
                var dd = this.num.slice(-3, 1);  // 切片范围不合理，返回空值
                console.log(dd);
                var dd = this.num.slice(-3);  // 返回 num 数组倒数三个元素
                console.log(dd);
            },
            // 点击 "map" 按钮时执行的方法
            addmap() {
                console.log(this.num);  // 打印原始的 num 数组
                // 使用 map 方法对 num 数组的每个元素进行操作，并将结果存储在 dd 变量中
                let dd = this.num.map(function(item, index) {
                    return item *= 3;  // 将每个元素乘以 3
                });
                console.log(dd);  // 打印操作后的结果
            },
            // 点击 "include" 按钮时执行的方法
            addinclude() {
                console.log(this.num);  // 打印原始的 num 数组
                // 使用 includes 方法检查 num 数组是否包含指定元素
                let d1 = this.num.includes(5);  // 检查是否包含 5
                console.log(d1);  // 打印检查结果（true 或 false）
                let d2 = this.num.includes(20);  // 检查是否包含 20
                console.log(d2);  // 打印检查结果（true 或 false）
            },
            // 点击 "foreach" 按钮时执行的方法
            addforeach() {
                console.log(this.num);  // 打印原始的 num 数组
                // 使用 forEach 方法遍历 num 数组，并打印每个元素
                this.num.forEach(function(item, index) {
                    console.log(item);  // 打印每个元素
                });
            }
        }
    });
</script>
</html>